<script>
    chrome.extension.getBackgroundPage();
    
    function resetCounter()
    {
        localStorage.setItem('socialCounter_facebook',0)
        localStorage.setItem('socialCounter_plus',0)
        localStorage.setItem('socialCounter_twitter',0)
    }

	function bold(any){
		return "<b>" + any + "</b>";
	}
              
function prettyDate(time){
        
        var responce
                
        if(time < 60)
        {
            responce = "Less than a minute"   
        }
        else if(time < (60*2))
        {
            responce = "About 2 minutes"
        }
        
        else if(time < (60*3))
        {
            responce = "About 3 minutes"
        }
        
        else if(time < (60*4))
        {
            responce = "About 4 minutes"
        }
        
        else if(time < (60*5))
        {
            responce = "About 5 minutes"
        }
        else if(time < (60*10))
        {
            responce = "About 10 minutes"
        }
        else if(time < (60*20))
        {
            responce = "About 20 minutes"
        }
        else if(time < (60*30))
        {
            responce = "About half an hour"
        }
        else if(time < (60*45))
        {
            responce = "About 45 minutes"
        }
        else if(time <= (60*60))
        {
            responce = "About an hour"
        }
        else if(time > 3600)
        {
            responce = "About " + Math.round(time/60/60) + " hours"
        }
        else
        {
            responce = "Time updating..."
        }

		// days
		var days
		days = Math.floor(time/(60*60*24))

		time -= 60 * 60 * 24 * days;

		// hours
		var hours
		hours = Math.floor(time/(60*60))

		time -= 60 * 60 * hours;

		//minutes will be the rest divided by 60
        
        return ((days)?(bold(days) + " d "):"") + ((hours)?(bold(hours) + " h "):"") + bold(Math.round(time/60)) + " m";
}
    
</script>

<style>

body 
{
    width:200px;
    color:#666666;
    font-family:"Tahoma";
    font-size:12px;

}

</style>

<script>
	var debug = false;
	if(debug){
		document.write(localStorage.getItem('socialCounter_twitter'));
		chrome.tabs.getSelected(null, function(tab) {
			alert(tab.url);
		});
	}
</script>

The amount of time you have spent on: <br/><br/>
<script>
	var data = new Array(
		["Facebook", "facebook"],
		["Google+", "plus"],
		["Twitter", "twitter"]
	);
	var sum = 0;
	for( var i in data ){
		document.write('<span style="color:#3b5998;font-weight: bold;">' + data[i][0] + '</span>: ');
		var x = localStorage.getItem('socialCounter_' + data[i][1]);
		document.write(prettyDate(x) + "<br/>");
		var tmp
		sum += (tmp = parseInt(x))?tmp:0;
	}
</script>

<br />

<span style="color:#3b5998;font-weight: bold;">Total</span>:
<script> document.write(prettyDate(sum));</script><br/>


<div style="font-size:9pt; color:#cccccc;">
Having a problem?<br />
Click <a style="color:#cccccc; font-weight:bold" href="javascript:resetCounter()">here</a> to reset the counter
</div>
